<template>
  <div>
    <el-dialog
      class="idadd"
      title="新增菜单"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form
        :inline="true"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="菜单类型：" prop="author">
          <el-radio-group v-model="radio">
            <el-radio :label="3">顶级目录</el-radio>
            <el-radio :label="6">菜单</el-radio>
            <el-radio :label="9">按钮</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="上级菜单"
          prop="author"
          v-if="this.radio == 6"
          style="width: 800px"
        >
          <el-cascader
            :options="options"
            :show-all-levels="false"
            size="small"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="所在页面"
          prop="author"
          v-if="this.radio == 9"
          style="width: 800px"
        >
          <el-cascader
            :options="options"
            :show-all-levels="false"
            size="small"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="路由名称" prop="author" v-if="this.radio != 9">
          <el-input
            v-model="input"
            placeholder="前端路由name,唯一"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="路径：" prop="author" v-if="this.radio != 9">
          <el-input
            v-model="input"
            placeholder="前端路由path,忽略父节点路径"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="组建路径：" prop="author" v-if="this.radio != 9">
          <el-input
            v-model="input"
            placeholder="前端路由组件路径,比如@/views/foo/foo.vue"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="重定向：" prop="author" v-if="this.radio != 9">
          <el-input
            v-model="input"
            placeholder="redirect属性"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="按钮名称：" prop="author" v-if="this.radio == 9">
          <el-input
            v-model="input"
            placeholder="按钮名称:比如:新增"
            style="width: 500px"
            size="small"
          ></el-input>
        </el-form-item>
        <div style="width: 800px">
          <el-form-item label="排序：" prop="author">
            <el-input-number
              :inline="false"
              v-model="inputs"
              @change="handleChange"
              :min="1"
              :max="10"
              size="small"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="层级：" prop="author" v-if="this.radio != 3">
            <el-input-number
              v-model="inputs"
              @change="handleChange"
              :min="1"
              :max="10"
              size="small"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
        </div>
        <div v-if="this.radio != 9">
          <el-form-item
            label="是否隐藏："
            prop="author"
            style="margin-right: 200px"
          >
            <el-radio v-model="radios" label="1">是</el-radio>
            <el-radio v-model="radios" label="2">否</el-radio>
          </el-form-item>
          <el-form-item label="是否展开:" prop="author">
            <el-radio v-model="radios" label="1">是</el-radio>
            <el-radio v-model="radios" label="2">否</el-radio>
          </el-form-item>
        </div>
        <el-form-item label="meta属性:" prop="author" v-if="this.radio != 9">
          <div style="margin-left: 100px; margin-top: -55px">
            <el-input
              v-model="input"
              placeholder="meta的key"
              style="width: 350px"
              size="small"
            ></el-input>
            <el-input
              v-model="input"
              placeholder="比如商品管理"
              style="width: 350px"
              size="small"
            ></el-input>
            <el-input
              v-model="input"
              placeholder="meta的key"
              style="width: 350px"
              size="small"
            ></el-input>
            <el-input
              v-model="input"
              placeholder="比如el-icon-menu"
              style="width: 350px"
              size="small"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="权限标识：" prop="author" v-if="this.radio == 9">
          <el-input
            v-model="input"
            placeholder="按钮权限标识,比如:productList.list"
            style="width: 350px"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import authority from '@/api/authority'
import mixin from '@/mixins'
export default {
  mixins: [mixin],

  data() {
    return {
      data: [],
      dialogVisible: false,
      radio: 3,
      input: '',
      inputs: '',
      radios: '',
      radioss: '',
      options: [
        {
          value: 'zhinan',
          label: '商品管理',
          children: [
            {
              value: 'shejiyuanze',
              label: '商品列表',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'daohang',
              label: '商品分类',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'daohang',
              label: '品牌管理',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'daohang',
              label: '商品编辑',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'daohang',
              label: '新增商品',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
          ],
        },
        {
          value: 'zhinan',
          label: '订单管理',
          children: [
            {
              value: 'shejiyuanze',
              label: '订单列表',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'daohang',
              label: '订单详情',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'daohang',
              label: '退单列表',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'daohang',
              label: '退单详情',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'daohang',
              label: '地址管理',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
          ],
        },
        {
          value: 'zhinan',
          label: '注册用户管理',
          children: [
            {
              value: 'shejiyuanze',
              label: '用户列表',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
          ],
        },
        {
          value: 'zhinan',
          label: '营销管理',
          children: [
            {
              value: 'shejiyuanze',
              label: '限时活动',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'shejiyuanze',
              label: '广告列表',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
          ],
        },
        {
          value: 'zhinan',
          label: '内容管理',
          children: [
            {
              value: 'shejiyuanze',
              label: '文章列表',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'shejiyuanze',
              label: '新增文章',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'shejiyuanze',
              label: '编辑文章',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'shejiyuanze',
              label: '素材列表',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
          ],
        },
        {
          value: 'zhinan',
          label: '个人中心',
          children: [
            {
              value: 'shejiyuanze',
              label: '个人主页',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
            {
              value: 'shejiyuanze',
              label: '个人设置',
              children: [
                {
                  value: 'yizhi',
                  label: '查看',
                },
                {
                  value: 'fankui',
                  label: '新增',
                },
                {
                  value: 'xiaolv',
                  label: '编辑',
                },
                {
                  value: 'kekong',
                  label: '删除',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  created() {},
  mounted() {},
  methods: {
    submit() {
      this.dialogVisible = false
    },
    //子组件的打开方法
    open() {
      this.dialogVisible = true
      authority.getInitMenusApi().then(res => {
        this.data = res.data.permissionList
        console.log(this.data, 'resssssss')
      })
    },

    searchs(row) {
      console.log(row, 'rowrowrow')
      this.$refs.SkuDetail.open(row)
    },
    handleChange(value) {
      console.log(value)
    },
  },
}
</script>

<style scoped lang="scss">
/* .idadd ::v-deep .el-dialog {
  height: 700px !important;
} */
.el-input {
  width: 800px;
}
</style>